<template>
    <!-- 授权用户 -->
    <el-dialog title="任务延时" :visible.sync="visible" width="1100px" top="5vh" append-to-body>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item>
            <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd(undefined)"
          >新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-table ref="table" :data="deferList" height="660px">
          <el-table-column label="开始时间" prop="startDate" format="yyyy-MM-dd " width="180"/>
            
          <el-table-column label="延长结束时间" width="180">
            <template slot-scope="scope">
                <el-date-picker  style="width:100%"
                                v-model="scope.row.endDate"
                                v-show="scope.row.isNew"
                                size="mini"
                                type="date"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd "
                                placeholder="请选择">>
                </el-date-picker>
                <span v-show="!scope.row.isNew">{{
                    scope.row.endDate
                }}</span>
            </template>
          </el-table-column>
         <el-table-column label="延长理由" :show-overflow-tooltip="true" width="400">
            <template slot-scope="scope">
                <el-input v-model="scope.row.reason" class="centered-input"
                        size="mini"
                        v-show="scope.row.isNew"
                         clearable>
                </el-input>
                <span v-show="!scope.row.isNew">{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" :show-overflow-tooltip="true" width="80">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status=== 0" type="info">未审核</el-tag>
                <el-tag v-if="scope.row.status === 1" type="success">已通过</el-tag>
                <el-tag v-if="scope.row.status === 2" type="danger">已拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-show="scope.row.isNew"
              icon="el-icon-collection"
              @click="handleSave(scope.row)"
            >申请
            </el-button>
            <el-button
             v-show="scope.row.status===0 || scope.row.isNew"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
        </el-table>
        
      </el-row>
     
    </el-dialog>
  </template>
  
  <script>
import {
    deleteDeferTask,
    queryDeferList,
    saveDeferTask
} from "@/api/pms/project/deferTask";
  export default {
    props: {
      
    },
    data() {
      return {
        // 遮罩层
        visible: false,
        // 选中数组值
        userIds: [],
        // 总条数
        total: 0,
        addNum: 0,
        startDate: {},
        deferList: [{startDate:'2024-12-07', endDate:'2024-12-09',reason:'123',isNew: false}, {startDate:'2024-12-07', endDate:'2024-12-09',reason:'333', isNew: false}],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          taskId: undefined
        }
      };
    },
    methods: {
      // 显示弹框
      show(taskId,startDate) {
        this.startDate = startDate.split('T')[0];;
        this.queryParams.taskId = taskId;
        this.getList();
        this.visible = true;
      },
      // 查询表数据
      getList() {
        queryDeferList(this.queryParams).then(res => {
            this.deferList = res.data;
        });
      },
      handleAdd(){
        let addData = {};
        addData.startDate = this.startDate;
        addData.isNew = true;
        addData.addNum = ++this.addNum;
        addData.taskId = this.queryParams.taskId
        this.deferList.push(addData);
      },
      handleSave(deferData) {
        if(!deferData.endDate || !deferData.reason) {
            this.$message({
                    type: 'warning',
                    message: '请输入延长结束日期和理由'
                });
                return
        }
        saveDeferTask(deferData).then(res => {
            this.getList();
            if(res.code==200) {
                this.$message({
                    type: 'success',
                    message: '申请成功'
                });
            }
        })
      },
      handleDelete(deferData){
        if(deferData.isNew) {
            let index = this.deferList.findIndex(item => (item.addNum && item.addNum === deferData.addNum));
            if (index > -1) {
                this.deferList.splice(index, 1);
            }
        }else{
            console.log("要删除的", deferData)
            this.$confirm('确定删除延长时间记录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDeferTask(deferData.id).then(response => {
                        this.getList();
                        this.$message({
                        type: 'success',
                        message: '删除成功!'
                        });
                }).catch(error => {
                    // 处理更新进度时的错误
                    this.$message({
                    type: 'error',
                    message: '删除失败: ' + error.message
                    });
                });
            }).catch(() => {
            // 当用户点击取消按钮时，不做任何操作
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
      },
    }
  };
  </script>
  